<template>
    <NavBar :show-icon="false" title-text="双选会" bg-color="rgb(155, 227, 229)" />
    <div class="main">
        <view class="top" :style="{ top: systemInfo.sBarHeight + systemInfo.titleTop + 'px' }">
            <view class="dispaly-just-between search">
                <view class="ipt">
                    <tn-search-box @search="search" :search-button="false" size="sm" :border="false"
                        v-model="queryData.keywords" placeholder="搜索职位/公司/内容" />
                </view>

                <view class="cate w-100">
                    <view class="item dispaly" @click="navTo(`/subPackage/index/selectCityPage`)">
                        <view class="text">地域</view>
                        <view class="s">
                            <image src="/static/icon/s.png" />
                        </view>
                    </view>
                    <view class="item dispaly" @click="cateOpen">
                        <view class="text">筛选</view>
                        <view class="s">
                            <image src="/static/icon/s.png" />
                        </view>
                    </view>
                </view>
            </view>
        </view>



        <view class="list" :style="{ marginTop: topNavheight + systemInfo.sBarHeight + systemInfo.titleTop + 'px' }">
            <view class="swiper">
                <tn-swiper loop autoplay :interval="2000" v-model="currentSwiperIndex" :data="swiperData" width="100%"
                    height="273">
                    <template #default="{ data }">
                        <view class="swiper-data">
                            <image class="image" :src="data" mode="aspectFill" />
                        </view>
                    </template>
                </tn-swiper>
            </view>
            <tn-sticky :offset-top="systemInfo.sBarHeight + systemInfo.titleTop + topNavheight">
                <view class="tab">
                    <tn-tabs v-model="currentTabIndex" bg-color="rgba(0,0,0,0)" :bottom-shadow="false"
                        active-color="#000" active-font-size="40" :bar="false">
                        <tn-tabs-item @click="changeTab(item)" v-for="(item, index) in tabsData" :key="index"
                            :title="item.text" />
                    </tn-tabs>
                </view>
            </tn-sticky>
            <hCard :data="jobListData" />
            <LoadMore :status="status" :show="loadShow" />
        </view>
        <SelectCate :data="dCate" @confirm="confirm" :tab="true" :type="2" :show-cate="cateShow"
            @close="(show: boolean) => cateShow = show" />
    </div>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/util';
import TnSwiper from '@tuniao/tnui-vue3-uniapp/components/swiper/src/swiper.vue'
import TnSticky from '@tuniao/tnui-vue3-uniapp/components/sticky/src/sticky.vue'
import { onLoad, onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app'
import TnSearchBox from '@tuniao/tnui-vue3-uniapp/components/search-box/src/search-box.vue'
import { ref, onMounted, reactive } from 'vue';
import TnTabs from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs.vue'
import TnTabsItem from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs-item.vue'
import SelectCate from '@/pages/index/components/selectCate.vue'
import { getElementHeight } from '@/utils/util'
import type { TabDataType } from '@/types/more'
import hCard from '@/components/jobCard/hCard.vue';
import type { RequestJobParmType } from '@/types/requstParm'
import { getDoubleList } from '@/api/home/home'


let dCate = ref([
    { name: '一天', id: 1 },
    { name: '一周', id: 7 },
    { name: '一个月', id: 30 },
    { name: '半年', id: 180 },
    { name: '一年', id: 365 },
])

// 获取职位列表
const queryData = reactive<RequestJobParmType>({
    page: 1,
    limit: 10,
    keywords: '',
    day: '',
    city_id: '',
    is_recommend: 1,
    is_state: 0,
})

onShow(() => {
    selCityGetData()
})

// 选择地址请求列表
const selCityGetData = () => {
    queryData.city_id = ''
    let pages = getCurrentPages()
    let currPage = pages[pages.length - 1] as any //当前页
    let id = currPage.data.id
    if (id) {
        queryData.city_id = id
        init()
        getListData()
        currPage.data.id = ''
    }
}

// 选择的职位分类
const confirm = (valueId: number) => {
    queryData.day = valueId
    init()
    getListData()
}

// 初始化
const init = () => {
    jobListData.value = []
    queryData.page = 1
}

// 请求职位列表
const status = ref<string>('loadmore')
const loadShow = ref<boolean>(false)
let jobListData = ref<Array<any>>([])
const getListData = async () => {
    status.value = 'loading'
    const res = await getDoubleList(queryData)
    if (res.code == 0) {
        if (res.data.list.length) {
            status.value = 'loadmore'
            loadShow.value = true
            jobListData.value = [...jobListData.value, ...res.data.list]
        } else {
            status.value = 'nomore'
        }
    }
}

const search = () => {
    init()
    getListData()
}

// 触底分页
onReachBottom(() => {
    (queryData.page as number)++
    getListData()
})

// 下拉刷新
onPullDownRefresh(async () => {
    uni.showLoading({
        title: '加载中'
    })
    queryData.city_id = ''
    queryData.keywords = ''
    queryData.day = ''
    init()
    await getListData()
    uni.stopPullDownRefresh()
    uni.hideLoading()
})


const currentSwiperIndex = ref<number>(0) // 轮播图索引
// 轮播图数据
const swiperData = ref<Array<string>>([
    'https://resource.tuniaokj.com/images/xiongjie/x14.jpg',
    'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-2.jpg',
    'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
    'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new1.png',
    'https://resource.tuniaokj.com/images/xiongjie/xiong-3d.jpg',
])

let systemInfo = uni.getStorageSync('systemInfo')
const currentTabIndex = ref<number>(0)
const tabsData = ref<Array<TabDataType>>([
    {
        text: '推荐',
        type: 1
    },
    {
        text: '国企单位',
        type: 2
    }
])

// 切换tab
const changeType = ref<number>(1)
const changeTab = (item: TabDataType) => {
    init()
    if (item.type == 1) {
        queryData.is_recommend = 1
        delete queryData.is_state
    } else {
        queryData.is_state = 1
        delete queryData.is_recommend
    }
    changeType.value = item.type
    getListData()
}

// 分类弹窗
const cateShow = ref<boolean>(false)


const cateOpen = () => {
    cateShow.value = true
    uni.hideTabBar()
}
onLoad(() => {
    getListData()
})

// 获取top高度
const topNavheight = ref<number | unknown>(0)
onMounted(async () => {
    const height = await getElementHeight('.top')
    topNavheight.value = height
})

onReachBottom(() => {
})

</script>
<style lang="scss" scoped>
:deep(.tn-search-box) {
    background-color: #fff !important;
}

.list {
    padding: 20rpx 30rpx;

    .tab {
        margin-bottom: 33rpx;
        background-color: #fafafa;
        padding-bottom: 20rpx;
    }
}

.swiper {
    .swiper-data {
        .image {
            width: 690rpx;
            height: 273rpx;
            border-radius: 20rpx;
        }
    }
}

.top {
    background-color: #fff;
    padding: 0 30rpx 13rpx 30rpx;
    position: fixed;
    z-index: 999;
    // top: 0;
    width: 100%;
    background-color: #fafafa;
    // background: rgb(155, 227, 229);
    // background: linear-gradient(180deg, rgba(155, 227, 229, 1) 0%, rgba(250, 250, 250, 1) 100%, rgba(250, 250, 250, 1) 100%);
    padding-bottom: 20rpx;

    .search {
        .ipt {
            margin-right: 17rpx;
            flex: 5;
        }
    }

    .cate {
        flex: 0.5;
        // padding-right: 30rpx;
        display: flex;
        justify-content: flex-end;

        .item:first-child {
            margin-right: 20rpx;
        }

        .item {
            background-color: #fff;
            border-radius: 10rpx;
            width: 96rpx;
            height: 50rpx;
            text-align: center;
            line-height: 50rpx;
            justify-content: center;

            .text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #717171;
            }

            .s {
                image {
                    width: 15rpx;
                    height: 15rpx;
                }
            }
        }
    }
}
</style>